import React from 'react';
import {
    Box,
    Button,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper,
    Pagination,
    Alert,
    Typography,
    Stack
} from '@mui/material';
import InfoSection from './InfoSection';
import { Activity } from './types';
import PermissionGuard from '../../../components/PermissionGuard';

interface ActivitiesSectionProps {
    activities: Activity[];
    onEdit: (activity: Activity) => void;
    onAdd: () => void;
    onImport?: () => void;
    onView: (id: number) => void;
    onDelete: (id: number) => void;
    page: number;
    rowsPerPage: number;
    onPageChange: (event: unknown, newPage: number) => void;
    loading?: boolean;
    error?: string | null;
    total?: number;
}

const ActivitiesSection: React.FC<ActivitiesSectionProps> = ({
    activities,
    onEdit,
    onAdd,
    onImport,
    onDelete,
    page,
    rowsPerPage,
    onPageChange,
    loading,
    error,
    total
}) => {
    return (
        <InfoSection title="活动信息" onAdd={onAdd} onImport={onImport} loading={loading}>
            {error ? (
                <Box sx={{ mb: 2 }}>
                    <Alert severity="error">{error}</Alert>
                </Box>
            ) : (
                <>
                    {activities.length === 0 && !loading ? (
                        <Box sx={{ textAlign: 'center', py: 3, margin: '0 auto' }}>
                            <Typography variant="body1" color="text.secondary">
                                暂无活动信息
                            </Typography>
                        </Box>
                    ) : (
                        <TableContainer component={Paper} variant="outlined">
                            <Table aria-label="活动信息表">
                                <TableHead>
                                    <TableRow>
                                        <TableCell align="center">活动时间</TableCell>
                                        <TableCell align="center">活动类型</TableCell>
                                        <TableCell align="center">活动名称</TableCell>
                                        <TableCell align="center">备注</TableCell>
                                        <PermissionGuard requireEditFeatures>
                                            <TableCell align="center">选项</TableCell>
                                        </PermissionGuard>
                                    </TableRow>
                                </TableHead>

                                <TableBody>
                                    {activities.map((row) => (
                                        <TableRow key={row.id}>
                                            <TableCell align="center">{row.date}</TableCell>
                                            <TableCell align="center">{row.type}</TableCell>
                                            <TableCell align="center">{row.name}</TableCell>
                                            <TableCell align="center">{row.remark}</TableCell>
                                            <PermissionGuard requireEditFeatures>
                                                <TableCell align="center" className="table-actions">
                                                    <Stack direction="row" spacing={1} justifyContent="center">
                                                        <Button
                                                            size="small"
                                                            variant="outlined"
                                                            color="primary"
                                                            onClick={() => onEdit(row)}
                                                            sx={{ minWidth: '60px' }}>
                                                            编辑
                                                        </Button>
                                                        <Button
                                                            size="small"
                                                            variant="outlined"
                                                            color="error"
                                                            onClick={() => onDelete(row.id)}
                                                            sx={{ minWidth: '60px' }}>
                                                            删除
                                                        </Button>
                                                    </Stack>
                                                </TableCell>
                                            </PermissionGuard>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    )}

                    {/* 分页组件 */}
                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
                        <Pagination
                            count={Math.ceil((total ? total : activities.length) / rowsPerPage)}
                            page={page}
                            onChange={onPageChange}
                            color="primary"
                        />
                    </Box>
                </>
            )}
        </InfoSection>
    );
};

export default ActivitiesSection;
